<template>
	<view class="list">
		<view class="order-nav" :style="{ top: topDistance  }">
			<view class="all" @tap="changeOrderNav(item.status)" :class="{ active: currentNav == item.status }" v-for="(item,index) in orderNav" :key="index">
				{{ item.text }}
			</view>
		</view>
		<view class="order-con">
			<view class="order-item" v-for="(item,index) in mathchList">
				<view class="order-t">
					<view class="bh">
						订单编号：{{ item.orderId }}
					</view>
					<text>{{ payStaus[index] }}</text>
				</view>
				<navigator :url="`../../kind/detail/detail?id=${subItem.product_id}`" class="order-info" v-for="subItem in item.subList">
					<image :src="subItem.cover_img" mode=""></image>
					<view class="goods-info">
						<view class="info-t">
							<text class="title">{{ subItem.gname }}</text>
							<text class="title">￥{{ subItem.price }}</text>
						</view>
						<view class="info-d">
							<view class="detail">
								<view class="sku">
									编号：{{subItem.sku_code}}
								</view>
								<view class="classess">
									规格：{{ subItem.color_text }}
								</view>
							</view>
							<view class="count">
								x {{subItem.count}}
							</view>
						</view>
					</view>
				</navigator>
				<view class="opt">
					<view class="time">
						时间：{{item.addTime}}
						
					</view>
					<view class="xiaoji">
						总价：￥{{ item.subTotalPrice }}
					</view>
				</view>
				<view class="pay" v-if="currentNav == 0">
					<view class="pay-con">
						<!-- <text>合计：{{totalPrice}}</text> -->
						<view class="confirm cancel" @tap="cancelOrder(item.orderId)">
							取消订单
						</view>
						<view class="confirm" @tap="pay(item)">
							付款
						</view>
					</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	import { list,delOrderPre } from '../../../utils/order/orderList/index.js';
	export default {
		data() {
			return {
				currentNav: 0,
				orderNav: [
					{
						text: '待付款',
						status: 0
					},
					{
						text: '已付款',
						status: 1
					},
					{
						text: '已发货',
						status: 2
					},
					{
						text: '已收货',
						status: 3
					},
					{
						text: '申请退款',
						status: 9
					}
				],
				payList: [],
				orderList: [],
				topDistance: 0
			};
		},
		methods: {
			async getOrderList () {
				let data = await list({ userId: uni.getStorageSync('userInfo').id });
				console.log(data)
				data.data.data.list.forEach(el => {
					el.subTotalPrice = el.subList.reduce((acc, item) => {
						return acc + item.count * item.price;
					},0)
				})
				this.orderList = data.data.data.list;
			},
			changeOrderNav (status) {
				this.currentNav = status;
			},
			async cancelOrder (orderId) {
				let data = await delOrderPre({ orderId });
				if (data.data.code == 'S') {
					uni.showToast({
						title: '取消订单成功'
					})
					this.getOrderList();
				} else {
					uni.showToast({
						title: '取消订单失败'
					})
				}
			},
			pay (item) {
				console.log(item);
				uni.setStorageSync('orderId', item.orderId);
				uni.setStorageSync('totalPrice', item.subTotalPrice);
				uni.navigateTo({
					url:'../pay/pay'
				})
			}
		},
		computed: {
			mathchList () {
				return this.orderList.filter(el => el.status == this.currentNav);
			},
			payStaus () {
				// console.log(this.mathchList)
			return this.mathchList.map(el => {
					if (el.status == '0') {
						return '未付款';
					} else if (el.status == '1') {
						return '等待发货';
					} else if (el.status == '2') {
						return '已发货';
					} else if (el.status == '3') {
						return '用户已签收';
					} else if (el.status == '4') {
						return '确认收获,已退款';
					}
				});
				// console.log(el);
			}
		},
		onShow() {
			uni.setNavigationBarTitle({
			　　title:'订单列表'
			});
			this.getOrderList();
			console.log(this.orderList);
			// console.log(uni.getSystemInfoSync().windowTop + 'px);
			
			// #ifdef  H5
			this.topDistance = uni.getSystemInfoSync().windowTop + 'px';
			// #endif
		},
		onLoad(option) {
			// console.log(option);
			this.currentNav = option.type;
		}
	}
</script>

<style lang="scss">
	.list {
		width: 100vw;
		min-height: 100vh;
		max-height: 100%;
		background-color: #354E44;
		overflow: hidden;
		.order-nav{
			position: fixed;
			// top: 44px;
			left: 0;
			height: 78rpx;
			width: 100%;
			display: flex;
			font-size: 30rpx;
			color: #FFFFFF;
			letter-spacing: 2.14rpx;
			z-index: 100;
			background-color: #354E44;
			view {
				position: relative;
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				&::after {
					position: absolute;
					bottom: 0;
					content: '';
					width: 62rpx;
					height: 6rpx;
					background-color: #fff;
					border-radius: 10rpx 10rpx 0 0;
					display: none;
				}
				&.active {
					&::after {
						display: block;
					}
				}
			}
		}
		.order-con {
			margin-top: 98rpx;
			width: 100%;
			min-height: 100vh;
			max-height: 100%;
			padding: 20rpx;
			border-radius: 50rpx 50rpx 0 0;
			background-color: #F1ECE7;
			box-sizing: border-box;
			padding: 42rpx 38rpx 0 40rpx;
			overflow: hidden;
			.order-item {
				width: 100%;
				// margin: 35rpx;
				background-color: #fff;
				border-radius: 20rpx;
				box-sizing: border-box;
				padding: 30rpx;
				margin-bottom: 40rpx;
				.order-t {
						display: flex;
						justify-content: space-between;
						font-size: 22rpx;
						color: #333;
						padding-bottom: 25rpx;
						border-bottom:1px solid #F1ECE7;
				}
				.order-info {
					display: flex;
					padding: 20rpx;
					border-bottom:1px solid #F1ECE7;
					image {
						width: 160rpx;
						height: 160rpx;
						margin-right: 20rpx;
					}
					.goods-info {
						flex: 1;
						.info-t, .info-d {
							display: flex;
							justify-content: space-between;
							font-size: 26rpx;
							// font-weight: bolder;
							color: #3E3E3E;
							letter-spacing: 1.86rpx;
						}
						.info-t {
							margin: 20rpx 0;
						}
						.info-d {
							color: #8d8d8d;
						}
					}
				}
			}
			.opt {
				display: flex;
				justify-content: space-between;
				font-size: 23rpx;
				color: #333;
				padding: 20rpx 0;
			}
			.pay {
				display: flex;
				justify-content: flex-end;
				font-size: 26rpx;
				.pay-con {
					display: flex;
					.cancel {
						margin-right: 15rpx;
					}
					.confirm {
						margin-top: 20rpx;
						width: 128rpx;
						height: 50rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						border: 1px solid #000;
						border-radius: 10rpx;
					}
				}
				
			}
		}
	}
</style>
